iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 27
0
Modern Web

弄點簡單的 Chrome Extension 讓生活更方便系列 第 27

Chrome Extension 27 - Youtube 在 option 頁面帶出影片資料

  • 分享至 

  • xImage
  •  

繼續利用 option 頁面做一個收藏所有影片的頁面,及簡易的刪除影片功能 :

https://ithelp.ithome.com.tw/upload/images/20181111/20094223SU90c0EGro.png

使用 iframe 內嵌 youtube video :

<iframe width="420" height="315" :src="https://www.youtube.com/embed/{影片id}"></iframe>

root.vue 的 templdate 部分 :

<template>
    <el-container :gutter="24">
        <el-main>
            <el-row v-for="(video,index) in videos">
                <el-col :span="6">
                    <iframe width="420" height="315" :src="'https://www.youtube.com/embed/'+video.videoKey"></iframe>
                </el-col>
                <el-col :span="16">
                    <el-col :span="24">
                        <el-col class="grid-content bg-purple-light">
                            <el-button type="danger" @click="deleteVideo(index)">刪除影片資料</el-button>
                        </el-col>
                    </el-col>
                    <el-col :span="24">
                        <ul v-for="item in video.items">
                            <li>
                                <el-button size="mini">{{getMinSec(item.time)}} - {{item.message}}</el-button>
                            </li>
                        </ul>
                    </el-col>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</template>

root.vue 的 scripts 部分 :

<script>
export default {
    data: () => ({
        videos: []
    }),
    computed: {},
    created() {},
    mounted() {
        this.loadData();
    },
    methods: {
        loadData() {
            var vm = this;
            chrome.storage.sync.get("tempData", function(result) {

                if (result !== undefined) {
                    var tempData = result.tempData;

                    var jsonResult = [];
                    if (tempData !== undefined) {
                        jsonResult = tempData;
                    }
                    vm.videos = jsonResult;
                }
            });
        },
        getMinSec(t) {
            return Math.floor(t / 60) + '分' + (t % 60) + '秒';
        },
        saveData() {
            var vm = this;
            chrome.storage.sync.set({ "tempData": vm.videos }, function() {});
        },
        deleteVideo(index) {
            var vm = this;
            vm.videos.splice(index, 1);
            vm.saveData();
        }

    }
}
</script>

<style>
.el-col {
    border-radius: 4px;
    padding: 5px;
}
</style>

執行結果 :
可以使用[選項]跳轉到此頁 :
https://ithelp.ithome.com.tw/upload/images/20181111/20094223DpBUBJ5vF7.png

按下刪除按鈕即可刪除影片 :
https://ithelp.ithome.com.tw/upload/images/20181111/20094223gPDl2rGOzK.png

感謝收看 :)


上一篇
Chrome Extension 26 - Youtube 筆記功能整理
下一篇
Chrome Extension 28 - Youtube 筆記功能,增加影片標籤
系列文
弄點簡單的 Chrome Extension 讓生活更方便30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言